const path = require('path');
const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin'); //每次打包清空dist文件
const HtmlWebpackPlugin = require('html-webpack-plugin');  //自动产出html文件
const ExtractTextWebpackPlugin = require("extract-text-webpack-plugin");  //单独打包css文件
let cssExtract = new ExtractTextWebpackPlugin('css/css.css');
let lessExtract = new ExtractTextWebpackPlugin('css/less.css');
let sassExtract = new ExtractTextWebpackPlugin('css/sass.css');
module.exports = {
    mode: 'development',
    // entry:'./src/index.js',   // 入口文件 字符串方式
    // entry:['./src/index.js','./src/base.js']   数组方式

    entry:{  // 对象方式，多入口 
    //先找到每个入口（Entry）,然后从各个入口分别出发，找到依赖的模块（Module）
    //然后生成一个代码块（Chunk）,最后 会把Chunk写入文件系统中（Assets）
        index:'./src/js/index.js',
        base: './src/js/base.js',
        common:'./src/js/common.js',  //引入公用的文件入口
    },    
    output:{
        path:path.resolve(__dirname,'dist'),  //输出的文件夹目录
        // filename:'bundle.js',  //打包后输出的文件名
        filename:'js/[name].[hash:8].js' //多入口文件输出文件名
    },
    resolve:{
        extensions:["",".js",".less"], //配置查找的扩展名
        alias:{ //配置别名

        }
    },
    watch:true,  //监控源文件变化，当放生变化后，则重新打包
    watchOptions:{
        ignored:/node_modules/,
        poll:1000, //每秒钟询问的次数
        aggregateTimeout:500 //防抖
    },
    module: {  //模块规则
        rules:[
            {   //加载jquery 配置
                test:require.resolve('jquery'),
                use:{
                    loader:'expose-loader',
                    options:'$'
                }
            },
        
            { // 加载css 配置
                test:/\.css$/,
                // loader:["style-loader","css-loader"]
                loader:cssExtract.extract({  //单独提取css文件打包配置
                    //postcss-loader 自动添加浏览器兼容前缀
                    use:["css-loader","postcss-loader"]
                })
            },
            { // 加载less 配置
                test: /\.less/,
                // loader: ["style-loader", "css-loader",'less-loader']
                loader: lessExtract.extract({  //单独提取less文件打包配置
                    use: ["css-loader", "postcss-loader",'less-loader']
                })
            },
            { // 加载sass 配置
                test: /\.scss/,
                // loader: ["style-loader", "css-loader",'sass-loader']
                loader: sassExtract.extract({  //单独提取sass文件打包配置
                    use: ["css-loader", "postcss-loader", 'sass-loader']
                })
            },



            // { //加载 图片配置
            //     test:/\.jpg|png|gif|svg|bmp/,
            //     loader:{
            //         loader:"file-loader",
            //         options:{
            //             outputPath: 'images/'  //指定图片文件的输出目录
            //         }
            //     }
            // },
            {
                test: /\.(jpg|png|gif|svg|bmp)/,
                loader:{
                    loader:'url-loader',
                    options:{
                        limit:2*1024,
                        outputPath:'images/',
                        name:'[hash:8].[name].[ext]'
                    }
                }
            },

            {   //html内联图片
                test:/\.html/,
                loader:"html-withimg-loader"
            },
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: "babel-loader"
                }
            }
        ]
    },   
    plugins: [  //插件
        //自动向模块内注入变量
        new webpack.ProvidePlugin({
            $:'jquery'
        }),
        new CleanWebpackPlugin([path.resolve(__dirname, 'dist')]),  //每次打包之前，删除dist目录下文件
        //自动产出html文件
        new HtmlWebpackPlugin({
            minify: {
                removeAttributeQuotes:true  //压缩html文件，把属性的双引号删除
            },
            chunks: ['index','common'],
            title:"index",
            hash:true, //会在引入的JS加入字符串避免缓存
            template:'./src/index.html',
            filename:'index.html',
            inject:true
        }),

        new HtmlWebpackPlugin({
            minify: {
                removeAttributeQuotes: true  //压缩html文件，把属性的双引号删除
            },
            chunks: ['base', 'common'],
            title: "base",
            hash: true, //会在引入的JS加入字符串避免缓存
            template: './src/index.html',
            filename: 'base.html',
            inject: true
        }),
        cssExtract,
        lessExtract,
        sassExtract
    ],  
    //配置静态服务器，可以用来预览打包后的项目
    devServer:{  //开发服务器
        contentBase:'./dist',
        host:'localhost',
        port:'8080',
        // open:true,
        compress:true,  //服务器返回给浏览器时是否启用gzip压缩
    }
}